<!--  -->
<template>
  <div class="Home">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- 广告位开始 -->
      <van-notice-bar left-icon="volume-o" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" mode="closeable" />
      <!-- 广告位结束 -->
      <!-- 头部导航栏开始 -->
      <van-nav-bar class="Home-nav-bar" title="点呀app" />
      <!-- 头部导航栏结束 -->
      <!-- 头部搜索开始 -->
      <van-search show-action label="地址" placeholder="请输入搜索关键词" background="#4fc08d">
        <template #action>
          <div @click="onLogin">搜索</div>
        </template>
      </van-search>
      <!-- 头部搜索结束 -->
      <!-- 轮播图开始 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img class="swipe-item-img" v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
      <!-- 轮播图结束 -->
      <!-- 分割线 -->
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">为你推荐</van-divider>
      <!-- 商品列表开始 -->

      <!-- 商品列表开始 -->
      <van-list :offset='100' v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > 
        <div v-for="i in length" :key="i" class="row">
          <QfGoodItem :good="goods[2*i-2]" />
          <QfGoodItem :good="goods[2*i-1]" />
        </div>
      </van-list>
    </van-pull-refresh>
    <!-- 商品列表结束 -->
    <QfTabbar></QfTabbar>
  </div>
</template>

<script>
import QfTabbar from '@/components/common/QfTabbar'
import {
  NavBar,
  NoticeBar,
  Search,
  Swipe,
  SwipeItem,
  Lazyload,
  Divider,
  PullRefresh,
  List,
} from "vant";
import Vue from "vue";
import { QfGoodItem } from "@/components/";

Vue.use(Lazyload);
export default {
  name: "Home",
  components: {
    QfTabbar,
    QfGoodItem,
    [NavBar.name]: NavBar,
    [NoticeBar.name]: NoticeBar,
    [Search.name]: Search,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Divider.name]: Divider,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List,
  },
  data() {
    return {
      images: [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg",
      ],
      goods: [
        { id: 1, name: "电脑", price: "200", src: "" },
        { id: 2, name: "电脑", price: "200", src: "" },
        { id: 3, name: "电脑", price: "200", src: "" },
        { id: 4, name: "电脑", price: "200", src: "" },
        { id: 5, name: "电脑", price: "200", src: "" },
        { id: 6, name: "电脑", price: "200", src: "" },
        { id: 7, name: "电脑", price: "200", src: "" },
        { id: 8, name: "电脑", price: "200", src: "" },
        { id: 9, name: "电脑", price: "200", src: "" },
        { id: 10, name: "电脑", price: "200", src: "" },
        { id: 11, name: "电脑", price: "200", src: "" },
        { id: 12, name: "电脑", price: "200", src: "" },
        { id: 13, name: "电脑", price: "200", src: "" },
        { id: 14, name: "电脑", price: "200", src: "" },
        { id: 15, name: "电脑", price: "200", src: "" },
        { id: 16, name: "电脑", price: "200", src: "" },
      ],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  computed: {
    length: function () {
      return Math.floor(this.goods.length / 2);
    },
  },
  methods: {
    onLogin() {
      //  跳转到登录页面
      //   this.$router.push("/login")
    },
    onLoad() {
      console.log("到底了");
    },
    onRefresh() {
      console.log("刷新页面");
      setTimeout(()=>{
        this.refreshing=false
      },1000)
    },
  },
};
</script>
<style lang='scss' scope>
.swipe-item-img {
  display: block;
  width: 10rem;
  height: 3rem;
}
.Home-nav-bar {
  background:rgb(237,157,62);
}
.row{
  display: flex;
}
</style>